<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>编辑并发送模板消息</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f1">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">

    <style type="text/css">
        .table-edit {
            width: 95%;
            margin-top: 20px !important;
            border: 0px;
        }

        .table-edit input[type=text] {
            border: 1px solid #e8e8e8;
        }

        .table-edit .tdL-salerManager {
            width: 18%;
            text-align: right;
            padding-right: 5px !important;
            height: 45px;
            border: 0px;
        }

        .table-edit .tdR-salerManager {
            width: 82%;
            height: 45px;
            border: 0px;
        }

        .table-edit .tdL-bigAreaManager {
            width: 18%;
            text-align: right;
            padding-right: 5px !important;
            height: 36px;
            border: 0px;
        }

        .table-edit .tdR-bigAreaManager {
            width: 82%;
            height: 36px;
            border: 0px;
        }

        .table-edit textarea {
            height: 60px;
            border: 1px solid #e8e8e8;
            padding-top: 5px !important;
        }

        .table-area input[type=number] {
            border: 0px;
            text-align: center;
        }

        .table-area td {
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid #e8e8e8;
            border-right: 1px solid #e8e8e8;
        }

        .table-area td .number {
            width: 22px;
            border: 0px;
            text-align: left;
        }

        .table-area td .number-span {
            vertical-align: middle;
            width: 15px;
            height: 15px;
            line-height: 12px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        .table-edit select {
            border: 1px solid #e8e8e8;
        }

        .table-edit .day-content {
            width: 56%;
            float: right;
            height: 30px;
            line-height: 30px;
            border: 1px solid #e8e8e8;
            border-left: 0px;
        }

        .table-area .area-name-font {
            text-align: left;
            text-indent: 5px;
        }

        .table-area .row-height {
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            word-break: break-all;
            word-wrap: break-word;
            text-align: left;
        }

        .table-area input {
            text-align: center;
        }
        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 1px;
            right: 1px;
            width: 20px;
        }
        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
            border-color: #888 transparent transparent transparent;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            height: 0;
            left: 50%;
            margin-left: -4px;
            margin-top: -2px;
            position: absolute;
            top: 50%;
            width: 0;
        }
        .select2-container--bootstrap .select2-selection--single, .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 25px !important;
        }
        .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
            height: 20px;
            right: 3px;
        }
        .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
            line-height: 22px !important;
        }
    </style>
</head>
<body>
<div class="layout" style="left:0px;top:0px;right:0px;bottom:0px;" id="edit">
    <div class="center" style="overflow:auto;overflow-x:hidden;">
       <table class="table-detail table-edit" style="border-top-width:0px;">
            <tr>
                <td :class="salerManager ? 'tdL-salerManager':'tdL-bigAreaManager'">消息概要：</td>
                <td :class="salerManager ? 'tdR-salerManager':'tdR-bigAreaManager'" style="text-align: left;">
                    <input style="width: inherit; height: 30px;" v-model="title" placeholder="消息名称(红色显示)" />
                </td>
            </tr>
            <template v-for="(item, i) in content_list">
                <tr>
                    <td :class="salerManager ? 'tdL-salerManager':'tdL-bigAreaManager'">{{item.name}}：</td>
                    <td :class="salerManager ? 'tdR-salerManager':'tdR-bigAreaManager'" style="text-align: left">
                        <input style="width: inherit; height: 30px;" v-model="item.value" placeholder="请输入" />
                    </td>
                </tr>
            </template>
            <tr>
                <td :class="salerManager ? 'tdL-salerManager':'tdL-bigAreaManager'">跳转url：</td>
                <td :class="salerManager ? 'tdR-salerManager':'tdR-bigAreaManager'" style="text-align: left">
                    <input style="width: inherit; height: 30px;" v-model="url" placeholder="请输入点击详情跳转的url" />
                </td>
            </tr>
            <tr>
                <td :class="salerManager ? 'tdL-salerManager':'tdL-bigAreaManager'" valign="top">备注：</td>
                <td :class="salerManager ? 'tdR-salerManager':'tdR-bigAreaManager'" style="text-align: left">
                    <textarea style="width: inherit; height: 80px;" v-model="remark" placeholder="备注内容(灰色显示)"></textarea>
                </td>
            </tr>
            <tr>
                <td :class="salerManager ? 'tdL-salerManager':'tdL-bigAreaManager'" valign="top">接收对象：</td>
                <td :class="salerManager ? 'tdR-salerManager':'tdR-bigAreaManager'" style="text-align: left"
                    valign="top">
                    <select  style="width: inherit;float: left;">
                        <option value="0">所有已订阅账户</option>
                        <option value="1">单个接受对象</option>
                    </select>
                </td>
            </tr>
        </table>
        <br/>
    </div>
    <div class="south" style="height:50px;line-height:30px;text-align:center;">
        <input type="button" value="发送" class="btn oaBtn btn-sm" @click="save()"/>
    </div>
</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });
    var edit = new Vue({
        el: "#edit",
        data: {
            template_id:'',
            title:'',
            remark:'',
            content_list:'',
            content_json:'',
            url:'',
            currentUser: getCurrentUser(),
            id: "",
            //  权限控制
            rightOpENames: [],
            salerManager: false,
            bigAreaManager: false
        },
        methods: {
            save: function () {

                if (this.title == "") {
                    alert("请填写消息标题");
                    return;
                }
                for (i in this.content_list){
                    var item = this.content_list[i];
                    var temp_string = item["value"];
                    if (temp_string.length == 0){
                        alert("请填写" + item["name"]);
                        return;
                    }
                }
                if (this.remark == "") {
                    alert("请填写消息备注");
                    return;
                }
                if (this.url == "") {
                    alert("请填写跳转url");
                    return;
                }
                var data = {};
                //  插入模板id数据
                data["template_id"] = this.template_id;
                data["url"] = this.url;
                //  插入和处理内容数据
                var content_data_Dic = {};
                for(i in this.content_json){
                    if (i == 0){//  第一个为消息概要
                        var inner_dic = {};
                        inner_dic["value"] = this.title;
                        inner_dic["color"] = "#ff0000";
                        content_data_Dic[this.content_json[i]] = inner_dic;
                    }else if (i == this.content_json.length - 1){// 最后一个为消息备注
                        var inner_dic = {};
                        inner_dic["value"] = this.remark;
                        inner_dic["color"] = "#999999";
                        content_data_Dic[this.content_json[i]] = inner_dic;
                    }else if (this.content_list[i - 1]["value"]) {//    中间的部分每个消息模板不一样，需要动态加载
                        var inner_dic = {};
                        inner_dic["value"] = this.content_list[i - 1]["value"];
                        inner_dic["color"] = "#173177";
                        content_data_Dic[this.content_json[i]] = inner_dic;
                    }
                }
                data["data"] = content_data_Dic;

                $.wyui.postMethod("/template/sendPrivateTemplate.json", data, function (r) {
                    alert("发送成功"+r["successCount"]+"条;发送失败"+r["errorCount"]+"条!");
                    api.close();
                });
            }
        },
        mounted: function () {
            //  内容处理
            var temp_list = $.wyui.page.urlParams.content.split("DATA}}");
            var content_list = new Array();
            var json_list = new Array();
            for (var i in temp_list){

                var title_string = temp_list[i].substring(temp_list[i].indexOf("}")+1,temp_list[i].indexOf("："));
                var json_string = temp_list[i].substring(temp_list[i].indexOf("{")+2,temp_list[i].indexOf("."));
                if (title_string.length > 0){
                    var tempDic = {};
                    tempDic["name"] = title_string;
                    tempDic["value"] = "";
                    content_list.push(tempDic);
                }
                if (json_string.length > 0){
                    json_list.push(json_string);
                }
            }
            this.content_list = content_list;
            this.content_json = json_list;
            this.template_id = $.wyui.page.urlParams.templateid;
            //权限
//            var that = this;
//            $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: getCurrentUser().id}, function (rightOps) {
//                for (var i = 0; i < rightOps.length; i++) {
//                    that.rightOpENames.push(rightOps[i].eName);
//                }
//                if ($.inArray('SalerManager', that.rightOpENames) > -1) {
//                    that.salerManager = true;
//                }
//                if ($.inArray('BigAreaManager', that.rightOpENames) > -1) {
//                    that.bigAreaManager = true;
//                    that.template.isBigAreaManager = "1";
//                }
//            }, true);
        }
    });
</script>
</body>
</html>